<template>
  <div class="fillcontain content-monitor-list">
    <div class="filter-container">
      <el-input
        placeholder="违规用户ID"
        v-model="listQuery.uid"
        style="width: 170px;"
      ></el-input>

      <el-select
        v-model="listQuery.risk_type"
        placeholder="请选择风险类型"
        clearable
      >
        <el-option
          v-for="item in typeOptions"
          :label="item.text"
          :value="item.id"
          :key="item.id"
        ></el-option>
      </el-select>

      <el-select
        v-model="listQuery.risk_level"
        placeholder="请选择风险级别"
        clearable
      >
        <el-option
          v-for="item in levelOptions"
          :label="item.text"
          :value="item.id"
          :key="item.id"
        ></el-option>
      </el-select>

      <el-select
        v-if="routeType === 'list'"
        v-model="listQuery.states"
        placeholder="请选择状态"
        clearable
        multiple 
      >
        <el-option
          v-for="item in stateOptions"
          :label="item.text"
          :value="item.id"
          :key="item.id"
        ></el-option>
      </el-select>

      <el-date-picker
        v-model="daterangeValue"
        type="datetimerange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        @change="dateTimeChange"
        :default-time="['00:00:00', '23:59:59']"
        :picker-options="daterangePickerOptions"
      ></el-date-picker>

      <el-button type="primary" @click="handleFilter">查询</el-button>
      <el-button type="warning" @click="resetFilter">重置</el-button>
      <el-button type="primary" @click="handleList(null, -2, '忽略', 'all')">批量忽略</el-button>
    </div>

    <div class="app-container calendar-list-container">
      <el-table
        :data="list"
        border
        fit
        highlight-current-row
        v-loading="listLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        @selection-change="handleSelectionChange"
      >
       <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column align="center" label="房间ID" min-width="150" >
          <template slot-scope="scope">
            <span>
              <router-link
                :to="`/voice-room/detail?room_id=${scope.row.room_id}`"
                >{{ scope.row.room_id }}</router-link
              >
            </span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="违规用户ID" width="120">
          <template slot-scope="scope">
            <span
              class="uid-click"
              @click="$UserInfoPopUp.install(scope.row.uid)"
              >{{ scope.row.uid }}</span
            >
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="start_time"
          label="违规起始时间"
          width="150"
        ></el-table-column>
        <el-table-column
          align="center"
          label="违规截止时间"
          width="150"
          prop="end_time"
        >
        </el-table-column>
        <el-table-column align="center" label="违规内容截取" width="200">
          <template slot-scope="scope">
            <audio
              style="width: 140px;height:30px"
              controls
              v-if="scope.row.audio_url"
              :src="scope.row.audio_url"
            ></audio>
          </template>
        </el-table-column>
        <el-table-column align="center" label="风险类型" width="120" prop="risk_type_desc">
        </el-table-column>
        <el-table-column
          v-if="routeType === 'list'"
          align="center"
          label="音频内容"
          width="120"
          prop="content"
        ></el-table-column>
        <el-table-column
          align="center"
          label="风险级别"
          width="200"
        >
        <template slot-scope="scope">
            <span>{{ scope.row.risk_level | RiskLevelFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作人"
          width="150"
          prop="operator"
        ></el-table-column>

        <el-table-column
          align="center"
          label="操作"
          width="300"
          v-if="routeType === 'list'"
        >
          <template slot-scope="scope">
            <template v-if="scope.row.state == -1">
              <el-button
                type="primary"
                size="small"
                @click="handleList(scope.row, -2, '忽略', 'single')"
                >忽略</el-button
              >
              <el-button
                type="primary"
                size="small"
                v-if="scope.row.state !== 4"
                @click="openForbiddenDialog(scope.row.uid, 4, scope.row.id)"
                >禁聊</el-button
              >
              <el-button
                type="primary"
                size="small"
                v-if="scope.row.state !== 0"
                @click="openForbiddenDialog(scope.row.uid, 0, scope.row.id)"
                >封号</el-button
              >
              <el-button
                type="primary"
                size="small"
                v-if="scope.row.state !== 1"
                @click="openForbiddenDialog(scope.row.uid, 1, scope.row.id)"
                >禁言</el-button
              >
              <el-button
                type="primary"
                size="small"
                v-if="scope.row.state !== 3"
                @click="openForbiddenDialog(scope.row.room_id, 3, scope.row.id)"
                >禁播</el-button
              >
            </template>
            <template v-else>
              <span>{{ scope.row.state |stateFilter }}</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column v-else align="center" label="处理方式" width="300">
          <template slot-scope="scope">
            <span>{{ scope.row.operation }} </span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <TablePagination
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      :current-page="listQuery.page"
      :limit="listQuery.limit"
      :total="total"
      :loading="listLoading"
    ></TablePagination>

    <BanPlayerDialog
      :visible.sync="banPlayerDialogVisible"
      @handleClose="closeBanPlayerDiolog"
      @handleSuccess="getList"
      :forbiddenType="forbiddenType"
      :uids="forbiddenAccounts"
      :preOperate="preOperate"
      :needPreOperate="true"
    ></BanPlayerDialog>
  </div>
</template>

<script>
import DATEPICKER_OPTIONS from "@/config/datepickerOptions";
import BanPlayerDialog from "@/components/BanPlayerDialog";
import TablePagination from "@/components/TablePagination";

export default {
  name: "contentMonitor",
  components: { BanPlayerDialog, TablePagination },
  data() {
    return {
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        offset: 0,
        limit: 20,
        uid: "",
        type: "",
        states: ["-1"]
      },
      defaultQueryParams:{
        states: ["-1"]
      },
      daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions,
      daterangeValue: "",
      levelOptions: [
        { id: "PASS", text: "正常内容， 建议直接放行" },
        { id: "REVIEW", text: "可疑内容， 建议人工审核" },
        { id: "REJECT", text: "违规内容， 建议直接拦截" }
      ],
      typeOptions: [
        { id: "0", text: "正常" },
        { id: "100", text: "涉政" },
        { id: "120", text: "国歌" },
        { id: "200", text: "色情" },
        { id: "210", text: "辱骂" },
        { id: "250", text: "娇喘" },
        { id: "300", text: "广告" },
        { id: "700", text: "黑名单" },
        { id: "900", text: "自定义" }
      ],
      stateOptions: [
        { id: "-1", text: "待处理" },
        { id: "-2", text: "忽略" },
        { id: "0", text: "封号" },
        { id: "1", text: "禁止发帖"},
        { id: "2", text: "禁止创建语音房" },
        { id: "3", text: "关播" },
        { id: "4", text: "禁聊" }
      ],
      forbiddenAccounts: "",
      banPlayerDialogVisible: false, //禁号
      forbiddenType: 0,
      preOperate: {
        result_ids: []
      },
      seletedIds:[],
      routeType: "" // list-内容监测, result-内容监测结果
    };
  },
  filters: {
    RiskLevelFilter(type) {
      const riskLevelMap = {
        "PASS": "正常内容， 建议直接放行",
        "REVIEW": "可疑内容， 建议人工审核",
        "REJECT": "违规内容， 建议直接拦截"
      };
      return riskLevelMap[type];
    },
    stateFilter(state) {
      // 审核状态  -1/初始状态  -2/忽略  0/封号 1/禁止发帖 2/禁止创建语音房
      const stateMap = {
        "-1": "待处理",
        "-2": "忽略",
        0: "封号",
        1: "禁止发帖",
        2: "禁止创建语音房",
        3: "关播",
        4: "禁聊"
      };
      return stateMap[state];
    }
  },
  mounted() {
    this.routeType = this.$route.params.type;
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      if(this.routeType === 'result'){
        this.listQuery.states = [0,1,3,4];
      }
      if(this.listQuery.states && this.listQuery.states.length === 0){
        this.listQuery.states = null;
      }
      this.$get("voiceroom/voice/audit/result", this.listQuery).then(resp => {
        this.list = resp.data.result;
        this.total = resp.data.count;
        this.listLoading = false;
      });
    },
    dateTimeChange() {
      this.listQuery.from_start_time =
        (this.daterangeValue &&
          this.daterangeValue[0] &&
          this.daterangeValue[0]) ||
        null;
      this.listQuery.to_start_time =
        (this.daterangeValue &&
          this.daterangeValue[1] &&
          this.daterangeValue[1]) ||
        null;
    },
    handleList(row, state, tip, type) {
      this.$confirm("确认" + tip + "吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(action => {
        let result_ids = null;
        if(type === 'all'){
          result_ids = this.seletedIds
        }else{
          result_ids = [row.id];
        }
        this.$post("voiceroom/voice/audit/result/operation", {
          result_ids: result_ids,
          state: -2,
          operation: "忽略"
        })
          .then(() => {
            this.$message.success("操作成功");
            this.getList();
          })
          .catch(err => {
            this.$message({
              message: err.data.error.description,
              type: 'success'
            })
        })
      });
    },
    closeBanPlayerDiolog() {
      this.banPlayerDialogVisible = false;
      this.preOperate = {
        result_ids: []
      }
    },
    fetchVoiceRoomInfo(room_id) {
      return this.$get("voiceroom/manage", {
        room_id: room_id,
        limit: 1,
        offset: 0
      })
        .then(resp => {
          if (resp && resp.data && resp.data.voice_room.length) {
            let roomInfo = resp.data.voice_room[0];
            if (roomInfo.owner.uid) {
              return Promise.resolve(roomInfo.owner.uid);
            } else {
              return Promise.reject();
            }
          }
        })
        .catch(err => {
          return Promise.reject(err);
        });
    },
    openForbiddenDialog(id, forbiddenType, resultId) {
      if (forbiddenType === 3) {
        // 禁播，通过room_id拿到房主uid
        this.fetchVoiceRoomInfo(id).then(uid => {
          this.passForbiddenData(uid, forbiddenType, resultId);
        });
      } else {
        this.passForbiddenData(id, forbiddenType, resultId);
      }
    },
    passForbiddenData(id, forbiddenType, resultId){
      this.forbiddenType = forbiddenType;
      this.banPlayerDialogVisible = true;
      this.forbiddenAccounts = id;
      this.preOperate.result_ids = [resultId];
    },
    //批量选择
    handleSelectionChange(val) {
      let ids = [];
      val.forEach((item) => {
        ids.push(item.id);
      });
      this.seletedIds = ids;
    },
  }
};
</script>
<style lang="scss">
.content-monitor-list {
  .el-table td.do-wrap .cell {
    text-overflow: inherit !important;
    white-space: normal !important;
  }

  .detail-dialog {
    min-width: 600px;

    .user-detail,
    .content-detail {
      line-height: 25px;
      font-size: 13px;
      overflow: hidden;
    }
  }

  .img-dialog {
    .el-dialog {
      box-shadow: none;
      background: none;
      .el-dialog__body {
        text-align: center;
      }
    }
  }

  .audio-wrapper {
    position: relative;
    margin-top: 5px;
    display: flex;
    height: 38px;
    max-width: 250px;

    .wave {
      flex: 1;
      background: url("https://p.qumitech.com/video_play_wave.png") no-repeat
        left center;
      background-size: 100% auto;
    }

    .operate-icon {
      height: 38px;
      background: linear-gradient(
        90deg,
        rgba(169, 116, 255, 1),
        rgba(130, 118, 255, 1)
      );
      box-shadow: 0px 4px 6px 0px rgba(139, 41, 201, 0.2);
      border-radius: 38px;

      .play-icon {
        padding: 0 6px 0 5px;
        width: 69px;
        height: 38px;
        line-height: 38px;
        background: url("https://p.qumitech.com/video_play_icon.png") no-repeat
          8px center;
        background-size: 23px 23px;
        color: #fff;
        font-size: 14px;
        text-align: right;
      }

      .pause-icon {
        width: 38px;
        height: 38px;
        background: url("https://p.qumitech.com/video_pause_icon.png") no-repeat
          center center;
        background-size: 23px 23px;
        border-radius: 38px;
      }
    }
  }
}
</style>
